<template id='DoughnutPieChart'>
  <div style="height: 100%">
    <div ref="chart" class="echart"></div>
    <div class="text">{{ doughnutPieData.title }}</div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name: "DoughnutPieChart",
  components: {},
  // 定义属性
  data() {
    return {
      fontSize: 12,
      padding: false,
    };
  },
  props: {
    doughnutPieData: {
      type: Object,
      default: () => {},
    },
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {
    doughnutPieData: {
      //深度监听，可监听到对象、数组的变化
      handler(val) {
        this.drawLine(this.doughnutPieData);
      },
      deep: true, //true 深度监听
    },
  },
  // 方法集合
  methods: {
    ScreenWidth() {
      if (screen.width <= 1920) {
        this.fontSize = 12;
        this.padding = false;
      } else {
        this.fontSize = 14;
        this.padding = true;
      }
    },
    drawLine(option) {
      this.ScreenWidth();
      const chart = this.$refs.chart;
      let myChart = this.$echarts.init(chart); //推荐
      let that = this;
      let options = {
        // color: ["rgb(247, 248, 149)", "rgb(4, 242, 254)"],
        title: {
          text: option.total, //图形标题，配置在中间对应效果图的80%
          left: "center",
          top: "center",
          textStyle: {
            fontSize: that.padding ? 36 : this.fontSize,
            color: "rgb(50,197,233)",
            align: "center",
          },
        },
        tooltip: {
          trigger: "item",
          position: function (point, params, dom, rect, size) {
            //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
            var x = point[0]; //
            var y = point[1];
            var viewWidth = size.viewSize[0];
            var viewHeight = size.viewSize[1];
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            var posX = 0; //x坐标位置
            var posY = 0; //y坐标位置

            if (x < boxWidth) {
              //左边放不开
              posX = 5;
            } else {
              //左边放的下
              posX = x - boxWidth;
            }

            if (y < boxHeight) {
              //上边放不开
              posY = 5;
            } else {
              //上边放得下
              posY = y - boxHeight;
            }

            return [posX, posY];
          },
        },
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: ["70%", "90%"],
            avoidLabelOverlap: false,
            itemStyle: {
              //   borderRadius: 10,
              borderColor: "rgb(16, 53, 97)",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: that.padding ? 14 : that.fontSize,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: option.data,
          },
        ],
      };
      // 绘制图表
      options && myChart.setOption(options);
      window.addEventListener("resize", () => {
        myChart.resize(); //resize 页面大小改变，调整大小
      });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.drawLine(this.doughnutPieData);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.echart {
  width: 100%;
  height: 100%;
}
.font {
  font-size: 0.313vw;
  color: white;
}
.text {
  user-select: none;
  text-align: center;
  font-size: 0.52vw;
  font-weight: bold;
}
</style>